<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
const value = ref("");

const options = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
  },
];

// 模态表单
const dialogTableVisible = ref(false);
const value1 = ref();
const value2 = ref();
const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  region: "",
  region1: "",
  region2: "",
  region3: "",
  region4: "",
  region5: "",
  region6: "",
  region7: "",
  region8: "",
  region9: "",
  region10: "",
  region11: "",
  region12: "",
  region13: "",
  region14: "",
  region15: "",
  region16: "",
  region17: "",
  region18: "",
});

const rules = reactive<FormRules>({
  region: [
    {
      required: true,
      message: "Please select Activity zone",
      trigger: "change",
    },
  ],
  region1: [
    {
      required: true,
      message: "Please select Activity zone",
      trigger: "change",
    },
  ],
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
// 表格
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
const handleClick = () => {
  console.log("click");
};
</script>
<style>
.lessons-padding {
  padding: 5px 15px;
}
/* 下拉框 */
.select-1 {
  width: 180px !important;
  height: 32px !important;
}
/* 查询按钮 */
.button-left {
  margin-left: 10px;
  width: 86px !important;
}
/* 日历按钮文字颜色 */
.button-text-color a {
  color: rgb(255, 254, 254);
}
/* 列表按钮文字颜色 */
.button-text-color2 a {
  color: rgb(0, 0, 0);
}
/* 模态框头部 */
.model-121 .el-dialog__header {
  background-color: #2f3e4d !important;
  margin: 0 !important;
  /* // & > span {
  //   color: white !important;
  //   font-size: 14px !important;
  // } */
}
.model-121 .el-dialog__header > span {
  color: white;
}
/* // 模态框时间选择 */
.time-select-1 {
  padding: 0 3px;
}
/* 模态>表格>选择器 */
.select-pading {
  padding: 3px 0;
}
.button-text-color a {
  text-decoration: none;
  color: aliceblue;
}
.button-text-color2 a {
  text-decoration: none;
  color: black;
}
</style>
